<template>
  <view>
    <view class="page-header-bar">
      <u-navbar
        :background="navbarBackground"
        :height="navigationHeight"
        :is-back="false"
        :is-fixed="true"
        :border-bottom="false"
      >
        <view class="am-flex-row-center navbar-slot-wrap"> </view>
      </u-navbar>
    </view>
    <view
      class="nav-bar-place"
      :style="{
        height: `${140}px`
      }"
    ></view>
    <view class="submit-order-success am-flex-rc-center">
      <view class="pay-res-icon am-flex-rc-center"
        ><image
          class="pay-res-icon-img"
          src="https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/10/08/40a82319f4ba4c5594b9b342c58420betick-circle@2x.png"
        ></image>
      </view>
      <view class="pay-res-text am-align-center">下单成功</view>
    </view>
    <view class="pay-result-box">
      <view class="am-flex-rc-center">
        <image
          class="pay-res-icon-order-img"
          src="https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/10/08/cd975d620b5a4bb89ee9e5dc95a4e20c容器@2x.png"
          mode="scaleToFill"
        />
        <view class="pay-label-text am-align-center"
          >您可在订单中心查看订单</view
        >
      </view>
      <view class="pay-btn-wrap am-flex-rc-center">
        <navigator open-type="redirect" url="/pages/order/order">
          <button
            class="u-reset-button co-success-button btn-list-order"
            hover-class="co-success-button--hover"
          >
            订单中心
          </button>
        </navigator>
        <navigator
          url="/pages/index/index"
          open-type="switchTab"
          style="margin-left: 30rpx"
        >
          <button
            class="u-reset-button co-primary-button btn-list"
            hover-class="co-primary-button--hover"
          >
            继续下单
          </button>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
import { navBarHeight, navigationHeight } from '@/utils/systemInfo.js'
export default {
  data: () => {
    return {
      isFail: false,
      navBarHeight,
      navigationHeight,
      navbarBackground: {}
    }
  },
  onLoad(option) {
    this.isFail = !!option.isFail
  }
}
</script>

<style lang="scss" scoped>
.pay-result-box {
  padding-bottom: 700rpx;
  background: #fff;
}
.pay-res-text {
  margin-left: 16rpx;
  font-size: 56rpx;
  color: #1d2129;
}
.pay-label-text {
  margin-left: 16rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #3d3d3d;
}

.pay-btn-wrap {
  margin-top: 80rpx;

  .btn-list-order {
    width: 200rpx;
    height: 66rpx;
    margin-right: 0;
    margin-left: 0;
    font-size: 30rpx;
    line-height: 66rpx;
    border: 2rpx solid;
    border-color: linear-gradient(
      to right,
      rgba(242.00000077486038, 65.0000037252903, 68.00000354647636, 1),
      rgba(252.00000017881393, 132.0000073313713, 59.00000028312206, 1)
    );
    color: #f14141;
  }
  .btn-list {
    width: 200rpx;
    height: 66rpx;
    margin-right: 0;
    margin-left: 0;
    font-size: 30rpx;
    line-height: 66rpx;
    background-color: #f24144;
  }
}
.page-header-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 750rpx;
  height: 378rpx;
  background-image: url('https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/10/08/eae3340094a84211a231b07b00ad2c91上面底部@2x.png');
  background-repeat: repeat-x;
  background-size: cover;
}
.navbar-title-img {
  display: block;
  width: 162rpx;
  height: 40rpx;
}
.navbar-slot-wrap {
  position: absolute;
  width: 750rpx;
  height: 378rpx;
  left: 0;
}
.pay-res-icon-img {
  width: 72rpx;
  height: 72rpx;
}
.pay-res-icon-order-img {
  width: 32rpx;
  height: 32rpx;
}
.submit-order-success {
  margin-bottom: 24rpx;
}
</style>
